Browsers often apply special styling to input fields that have been autofilled (e.g., by saved passwords or form data). CSS provides vendor-prefixed pseudo-classes to target these autofilled inputs for consistent styling.

How It Works

1
Use :-webkit-autofill to style autofilled inputs in WebKit-based browsers (Chrome, Safari, Edge).
2
Combine with other selectors like input or textarea to target specific fields.
3
You can adjust background color, text color, font, and even add transitions for smoother visuals.

Example: Styling Autofilled Inputs

In this example, when a user’s browser autofills the email or password field, the background changes to a light teal color and text becomes dark teal, providing a clear visual indication that the field has been autofilled.

Best Practices

1
Always use !important for autofill styles to override browser default styles.
2
Ensure sufficient contrast for text readability on autofilled fields.
3
Combine with :focus or :hover to enhance user interaction.
4
Test across multiple browsers, as autofill styling support varies and may require vendor prefixes.

Difficulty: 6/10

Topics: autofill pseudo-classes, browser inconsistency, CSS specificity

Scenario Questions

0-2 years experience

1
How would you change the background color of an input field when the browser autofills it with a saved password?
2
What happens if you try to style an autofilled input with just input:focus — why doesn’t that work?
3
You set background-color: yellow on an input, but it stays white when autofilled — what’s the first thing you’d check?

2-5 years experience

1
Our login form’s autofilled inputs look broken in Chrome but fine in Firefox — what’s likely causing this and how would you debug it?
2
A designer wants autofilled fields to have a subtle blue tint, but the browser’s default yellow override keeps showing up — how do you fix this without breaking accessibility?
3
Why does setting input:-webkit-autofill { color: white } sometimes make the text disappear, and how would you fix it?

5-8 years experience

1
We’re building a global form system and need consistent autofill styling across all browsers — what’s your strategy for handling browser inconsistencies without bloating CSS or breaking UX?
2
An autofill style we added caused a layout shift on mobile when the keyboard popped up — how would you diagnose and fix this without removing the visual feedback?
3
How would you design a CSS architecture that allows teams to override autofill styles safely across multiple components without creating specificity wars?

8+ years experience

1
We’re migrating a legacy form system that relies on inline styles for autofill — how would you phase out those styles without breaking user experience or introducing regressions across 20+ countries?
2
Autofill styling is causing performance issues on low-end devices during form rendering — how would you architect a solution that balances visual fidelity, performance, and maintainability at scale?
3
How would you advocate for a standardized autofill styling policy across engineering teams when different product groups have conflicting design requirements and browser support expectations?

Follow-up Questions

❓What happens if you use background-color: transparent on an autofilled input?
❓Why might your styles work in Chrome but not in Safari?
❓How would you test this across different browsers and devices?